<template>
  <div class="singer">
    <ScrollViewVue ref="scrollView">
      <ul class="singer-warpper">
        <li
          class="singer-group"
          v-for="(value, index) in keys"
          :key="index"
          ref="group"
        >
          <h2 class="group-title">{{ value }}</h2>
          <ul>
            <li 
            class="group-item" 
            v-for="value in list[index]" 
            :key="value.id"
            @click="switchSinger(value.id)"
            >
              <img v-lazy="value.img1v1Url" alt="" />
              <p>{{ value.name }}</p>
            </li>
          </ul>
        </li>
      </ul>
    </ScrollViewVue>
    <ul class="list-keys">
      <!-- <li 
      v-for="(key,index) in keys" 
      :key="key" 
      :class="{active:currentindex === index}"
      @click="keyDown(index)"
      >{{ key }}</li> -->
      <!-- 🔔 方法：给li设置data-index="index" 通过e.target.dataset.index获取index值 -->
      <li
        v-for="(key, index) in keys"
        :key="key"
        :data-index="index"
        :class="{ active: currentindex === index }"
        @touchstart.stop.prevent="touchstart"
        @touchmove.stop.prevent="touchmove"
      >
        {{ key }}
      </li>
    </ul>
    <!-- 如果不为''，则返回对应的keys中的值 -->
    <div class="fix-title" v-show="fixTitle !== ''" ref="fixTitle">{{ fixTitle }}</div>
    <transition>
    <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import { getAllArtists } from "../api";
import ScrollViewVue from "../components/ScrollView.vue";
// import { getLetterArtists } from '../api';
// import { getHotArtists } from '../api'
export default {
  name: "Singer",
  data() {
    return {
      keys: [],
      list: [],
      groupTop: [], // 导航栏每个元素对应的离顶部距离
      currentindex: 0, // 导航栏数据对应的索引
      beginOffsetY: 0, // 开始点击的时候的pageY距离
      moveOffsetY: 0, // 移动时候的pageY距离
      scrollY: 0, // 用来判断当前滚动的偏移位是否超出当前内容范围
    };
  },
  async created() {
    let res = await getAllArtists();
    // console.log(res);
    this.keys = res.keys;
    this.list = res.list;
  },
  // 滚动页面使得到导航条得值对应页面内容 即 页面A = 导航条A
  mounted() {
    // 调用scrollView中的 scrolling 方法获取页面滚动的值
    this.$refs.scrollView.scrolling((y) => {
      //   console.log(y);
      this.scrollY = y;
      // 当滚动距离y大于0 就是默认的是热门歌手区域，currentindex = 0
      if (y >= 0) {
        this.currentindex = 0;
      }
      // 当滚动距离在当前索引和下一个索引之间的距离中，导航条就跳到当前距离对应的索引
      for (let i = 0; i < this.groupTop.length; i++) {
        //   console.log(this.groupTop[1]);
        let preTop = this.groupTop[i]
        let nextTop = this.groupTop[i + 1]
        if (-y >= preTop && -y <= nextTop) {
          this.currentindex = i;

          // 用下一组标题的偏移位 + 当前滚动出去的偏移位
          let diffOffsetY = nextTop + y
          let fixTitleOffsetY = 0
          // 判断计算的结果是否是 0 ~ 分组标题高度的值
          if(diffOffsetY >= 0 && diffOffsetY <= this.fixTitleHeight){
              fixTitleOffsetY = diffOffsetY - this.fixTitleHeight
          }else{
              fixTitleOffsetY = 0
          }
          if(fixTitleOffsetY === this.fixTitleOffsetY){
              return
          }
          this.fixTitleOffsetY = fixTitleOffsetY
          this.$refs.fixTitle.style.transform = `translateY(${fixTitleOffsetY}px)`
          return
        }
        // 当滚动到底部,大于最后一个Z的距离时候, 则让 currentindex = this.keys.length - 1
        if (-y > this.groupTop[this.groupTop.length - 1]) {
          this.currentindex = this.groupTop.length - 1;
        }
      }
    });
  },
  computed: {
    fixTitle() {
      // 如果滚动偏移量大于等于0 则返回个空
      if (this.scrollY >= 0) {
        return "";
        // 小于0则根据当前滚动到内容的currentindex值取出keys中对应的值
      } else {
        return this.keys[this.currentindex];
      }
    },
  },
  methods: {
    keyDown(index) {
      // 点击导航栏后页面跳转到对应的数据
      //   console.log(this.groupTop[index]);
      this.$refs.scrollView.scrollTo(0, -this.groupTop[index]);
      this.currentindex = index;
    },
    touchstart(e) {
      //   console.log(e.target.dataset.index);
      let index = parseInt(e.target.dataset.index);
      this.keyDown(index);

      // touches：正在触摸屏幕的所有手指的一个列表
      // console.log(e.touches);
      this.beginOffsetY = e.touches[0].pageY;
      // console.log(this.beginOffsetY);
    },
    touchmove(e) {
      // 移动时候变化的pageY
      this.moveOffsetY = e.touches[0].pageY;
      //   console.log(this.moveOffsetY);
      //   console.log(e.target.offsetHeight);
      // 移动的比例
      let offsetY =
        (this.moveOffsetY - this.beginOffsetY) / e.target.offsetHeight;
      //   console.log(offsetY);
      // 当前点击的元素索引值加上移动比例 如果移动到对应元素的索引怎移动到那里
      let index = parseInt(e.target.dataset.index) + Math.floor(offsetY);
      //   console.log(index);
      if (index < 0) {
        index = 0;
      } else if (index > this.keys.length - 1) {
        index = this.keys.length - 1;
      }
      this.keyDown(index);
    },
    switchSinger(id){
        this.$router.push(`/singer/detail/${id}/singer`)
    }
  },
  watch: {
    list() {
      // console.log(this.$refs.group);
      // 💥注意点：watch只能监听数据的变化，数据变化的时候不一定已经全部渲染完了
      //            所以为了保证是渲染完成之后才去获取，我们可以借助vue中的$nextTick方法来实现
      //            也就是说在$nextTick的回调函数中一定能拿到渲染完成的数据，
      //            因为$nextTick的回调函数只有渲染完成之后才回执行
      this.$nextTick(() => {
        //   console.log(this.$refs.group);
        this.$refs.group.forEach((item) => {
          //   console.log(item.offsetTop);
          // 把每一个li距离顶部的高度存起来
          this.groupTop.push(item.offsetTop);
        });
      });
    },
    fixTitle(){
        this.$nextTick(()=>{
            this.fixTitleHeight = this.$refs.fixTitle.offsetHeigth
            console.log(this.fixTitleHeight);
        })
    }
  },
  components: {
    ScrollViewVue,
  },
};
</script>
<style scoped lang="scss">
@import "../assets/css/variable.scss";
@import "../assets/css/mixin.scss";
.singer {
  position: fixed;
  top: 184px;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  @include bg_sub_color();
  .singer-warpper {
    .singer-group {
      .group-title {
        @include bg_color();
        @include font-size($font_medium);
        color: #fff;
        padding: 10px 20px;
        box-sizing: border-box;
      }
      .group-item {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        border-bottom: 1px solid #ccc;
        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
        }
        p {
          @include font-size($font_medium_s);
          @include font_color();
          margin-left: 20px;
        }
      }
    }
  }
  .list-keys {
    position: fixed;
    right: 20px;
    top: 60%;
    transform: translateY(-50%);
    li {
      @include font-size($font_medium_s);
      @include font_color();
      padding: 3px 0;
      &.active {
        text-shadow: 0 0 10px #000;
      }
    }
  }
  .fix-title {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    @include bg_color();
    @include font-size($font_medium);
  }
}
.v-enter {
  transform: translateX(100%);
}
.v-enter-to {
  transform: translateX(0);
}
.v-enter-active {
  transition: transform 1s;
}
.v-leave {
  transform: translateX(0);
}
.v-leave-to {
  transform: translateX(100%);
}
.v-leave-active {
  transition: transform 1s;
}
</style>